<template>
	<view class="page feedback" >
		<view class="feedback-title" style="background-color: white;">
			<text style="margin-left: 75%;">张某山烟草店</text>
		</view>
		<view class="feedback-body" style="background-color: white;">
			<textarea placeholder="请输入反馈内容,至少输入10个字符..." v-model="sendDate.content" class="feedback-textare" />
		</view>
		<view style="width: 90%;height: 1px;background-color: #eaeaea;margin: 0 auto;">
			
		</view>
		<view class="feedback-body feedback-uploader oa-uploader" style="background-color: white;">
			<view class="uni-uploader">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file" style="position: relative;">
								<oa-image class="uni-uploader__img" :src="image"></oa-image>
								<view class="close-view" @tap="close(index)" :class="'bg-' + themeColor.name">x</view>
							</view>
						</block>
						<view class="uni-uploader__input-box" v-if="imageList.length < 10">
							<view class="uni-uploader__input" @tap="uploadImage"></view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="feedback-titles">
			<text>反馈类型</text>
		</view>
		<view class="category-list">

			<view class="box_1" >
				<span>拜访签到</span>
			</view>
			<view class="box_1" >
				<span>经营分析</span>
			</view>
			<view class="box_1" >
				<span>终端形象</span>
			</view>
			<view class="box_1" >
				<span>信息采集</span>
			</view>
			<view class="box_1" >
				<span>任务表注</span>
			</view>
			<view class="box_1" >
				<span>信息反馈</span>
			</view>


		</view>


		<button class="confirm-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading" :loading="btnLoading"
			@tap="send">
			提交
		</button>

	</view>
</template>

<script>
	import {
		opinionCreate
	} from '@/api/userInfo';
	export default {
		data() {
			return {


				imageList: [],

				sendDate: {
					type: '1',
					covers: '',
					content: '',
					contact_way: ''
				},
				btnLoading: false
			};
		},

		onShow() {
			// uni.setNavigationBarColor({
			// 	frontColor: '#ffffff',
			// 	backgroundColor: this.themeColor.color,
			// 	animation: {
			// 		duration: 400,
			// 		timingFunc: 'easeIn'
			// 	}
			// })
		},
		methods: {
			// 监听反馈类型事件
			initData() {
				this.hasLogin = true;
				// uni.setNavigationBarColor({
				// 	frontColor: '#ffffff',
				// 	backgroundColor: this.themeColor.color,
				// 	animation: {
				// 		duration: 400,
				// 		timingFunc: 'easeIn'
				// 	}
				// })
			},
			navTo(route) {
				if (!route) return;
				if (!this.hasLogin) {
					uni.removeStorageSync('backToPage');
					this.$mRouter.push({
						route: '/pages/public/login'
					});
				} else {
					this.$mRouter.push({
						route
					});
				}
			},
			// 打开相册选图
			uploadImage() {
				const _this = this;
				uni.chooseImage({
					count: 9, // 最多一次可以选择的图片张数
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机
					success: function(res) {
						if (_this.imageList.length + res.tempFiles.length > 9) {
							_this.$mHelper.toast('不要贪心哦，最多只可上传9张照片');
							return;
						}
						_this.handleUploadFile(res.tempFilePaths);
					}
				});
			},
			// 依次上传图片
			handleUploadFile(data) {
				this.$mHelper.toast('上传成功');
			},
			// 删除已选中图片
			close(e) {
				this.imageList.splice(e, 1);
			},
			// 快速输入
			chooseMsg() {
				uni.showActionSheet({
					itemList: this.msgContents,
					success: res => {
						this.sendDate.content = this.msgContents[res.tapIndex];
					}
				});
			},
			// 发送反馈
			async send() {
				this.$mHelper.toast('意见反馈成功');
			}
		},


	};
</script>

<style lang="scss">
	page {
		background-color:#f5faf9;
	}

	/*问题反馈*/
	.feedback-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: $spacing-base;
		width: 100%;
		height: 50px;
		margin-bottom:5%;
		font-size: $font-base;
		color: #808080;


	}

	.feedback-titles {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: $spacing-base;
		margin-top: $spacing-base;
		font-size: $font-base;
		color: #808080;

	}





	.feedback-uploader {
		padding: 22upx 20upx;
	}

	.box_1 {
		width: 30%;
		height: 40px;
		margin-top: 5%;
		margin-left: 2%;
		border: 1px #cecece solid;
		border-radius: 50upx;

		span {
			font-size: 15px;
			line-height: 40px;
			margin-left: 22%;
		}

	}

	.box_1:hover {
		background-color: #00b551;
	}

	.category-list {
		width: 100%;

		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		flex-wrap: wrap;


		.category {
			width: 25%;
			margin-top: 25upx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			border: 1px red solid;




			.share-btn {
				height: 142upx;
				text-align: left;
				background: none;
				padding: 0;
				margin: 0;


			}

			.share-btn:after {
				border: none;
				border-radius: none;

			}
		}
	}
</style>
